<template>
  <div class="shop">
    <header-view
      style="position: fixed; top: 0; width: 100%; z-index: 200"
    ></header-view>
    <div class="heading">
      <h3>我们的商品</h3>
      <div class="linkHome">
        <span class="linkStyle" @click="toHome">主页</span> /
        <span class="linkStyle" @click="toCart">购物车</span> /
        <span class="normalFont">商品页</span>
      </div>
    </div>
    <div class="categories">
      <div class="titled">
        <div class="title">
          <span>热门分类</span>
          <div class="view" @click="viewMore">
            <div v-if="!choseCate">
              <span>查看更多</span> <i class="iconfont icon-xiajiantou1"></i>
            </div>
            <div v-if="choseCate">
              <span>收起</span> <i class="iconfont icon-shangjiantou"></i>
            </div>
          </div>
        </div>
      </div>
      <transition name="fade" appear="true">
        <div class="mainBox" v-if="choseCate">
          <div class="tip">
            <h3>{{ defaultTip }}</h3>
          </div>
          <div class="dropdownItem">
            <div class="dropItem">
              <div
                class="itemList"
                v-for="item in choseList"
                :key="item"
                @click="chose(item)"
              >
                <div class="left">
                  <img :src="item.icon" alt="" />
                </div>
                <div class="right">
                  <span>{{ item.name }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </transition>
    </div>
    <div class="product-list">
      <div
        class="productList-box"
        v-for="item in hotCategoriesList"
        :key="item.id"
        @click="hotCategoriesBtn(item.name)"
      >
        <div class="imgBox">
          <img :src="item.icon" alt="" />
        </div>
        <h3>{{ item.name }}</h3>
      </div>
    </div>
    <div class="product">
      <div class="titled">
        <div class="title">
          <span></span>
          <span v-if="choseValue">你选择的是：{{ choseContent }}</span>
        </div>
      </div>
    </div>
    <div class="goodsList" v-infinite-scroll="load">
      <div class="empty" v-if="isEmpty">
        <el-empty description="未找到相关产品"></el-empty>
      </div>
      <div class="goodslist-box" v-for="item in goodsList" :key="item.id">
        <div class="icons" id="icon">
          <a
            class="fas fa-heart"
            @click="joinMyFavorite(item.serialNo)"
            title="添加到我的收藏"
          ></a>
          <a
            class="fas fa-eye"
            title="查看详情"
            @click="toShopDetail(item)"
          ></a>
        </div>
        <div class="image">
          <img :src="item.defaultImage" alt="" />
        </div>
        <div class="content">
          <div class="price spanlist">￥{{ item.price }}.00</div>
          <h3 class="spanlist">{{ item.name }}</h3>
          <star-view class="spanlist" :score="item.score"></star-view
          ><span class="spanlist"> 推荐指数：{{ item.score }} </span>
        </div>
      </div>
    </div>

    <footer-view></footer-view>
  </div>
</template>

<script>
import {
  queryCategoryTree,
  queryHotCategoryList,
  queryGoodsList,
} from "@/api/goods";
import { saveCollectionInfo } from "@/api/user";
import noImage from "../../assets/image/noImgs.png";
export default {
  data() {
    return {
      hotNo: 5,
      noImage: noImage,
      // 选择内容是否展示
      choseValue: false,
      // 是否展示选择框
      choseCate: false,
      defaultTip: "请选择商品分类",
      catrgoriesList: [],
      choseList: [],
      choseContent: "",
      hotCategoriesList: [],
      goodsList: [],
    };
  },
  setup() {},
  mounted() {
    let name = this.$route.params.searchKey;
    console.log(name);
    this.getGoodsListInfo(name);
    this.getCategoriesArray();
    this.getHotCategoriesArray();
  },
  methods: {
    // 选择具体分类
    chose(item) {
      if (item.children) {
        this.defaultTip = item.name;
        this.choseList = item.children;
      } else {
        this.choseContent = item.name;
        this.defaultTip = "请选择商品分类";
        this.choseCate = false;
        this.choseValue = true;
        this.choseList = this.catrgoriesList;
        const search = {
          name: this.choseContent,
        };
        queryGoodsList(search).then((res) => {
          this.goodsList = res.page.list;
        });
      }
    },
    // 无线滚动
    load() {
      console.log("sc");
    },
    // 获取分类列表
    getCategoriesArray() {
      queryCategoryTree().then((res) => {
        if (res.code === 0) {
          this.catrgoriesList = res.page.list;
        }
      });
    },
    // 获取热门搜索
    getHotCategoriesArray() {
      let hotNo = this.hotNo;
      queryHotCategoryList(hotNo).then((res) => {
        if (res.code === 0) {
          let initArrar = res.result;
          initArrar.forEach((item) => {
            if (item.icon === null) {
              item.icon = this.noImage;
            }
          });
          this.hotCategoriesList = res.result;
        }
      });
    },
    // 去主页
    toHome() {
      this.$router.push({ path: "/home" });
    },
    // 生成随机数用作商品编号
    // 加入购物车
    joinMyCart(serialNo) {
      const cartInfo = {};
      this.$message.success("加入购物车成功");
    },
    // 收藏商品
    joinMyFavorite(serialNo) {
      const collection = {
        objectNo: serialNo,
        objectType: "goods",
      };
      saveCollectionInfo(collection).then((res) => {
        if (res.code === 0) {
          this.$message.success("成功添加到我的收藏");
        }
      });
    },
    // 查看详情
    toShopDetail(goodsInfo) {
      let serialNo = goodsInfo.serialNo;
      let keyName = goodsInfo.categoryName;
      this.$router.push({
        name: "commodity",
        params: {
          spuNo: serialNo,
          keyName: keyName,
        },
      });
    },
    // 查看更多分类
    viewMore() {
      this.choseList = this.catrgoriesList;
      this.choseCate = !this.choseCate;
    },
    // 获取商品信息
    getGoodsListInfo(name) {
      if (name) {
        const search = {
          name: name,
        };
        queryGoodsList(search).then((res) => {
          if (res.code === 0) {
            this.goodsList = res.page.list;
          }
        });
      } else {
        queryGoodsList().then((res) => {
          if (res.code === 0) {
            this.goodsList = res.page.list;
          }
        });
      }
    },
    hotCategoriesBtn(name) {
      const search = {
        name: name,
      };
      queryGoodsList(search).then((res) => {
        if (res.code === 0) {
          this.goodsList = res.page.list;
        }
      });
    },
  },
  computed: {
    isEmpty() {
      if (this.goodsList.length == 0) {
        return true;
      }
      return false;
    },
  },
};
</script>

<style lang="scss">
.shop {
  background-color: #fff;
}
.heading {
  margin-top: 70px;
}
.categories {
  position: relative;
  margin: 40px 0 20px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  .titled {
    .title {
      padding-bottom: 0;
      .view {
        display: flex;
        padding-bottom: 10px;
        align-items: center;
        font-size: 16px;
        color: #244d4d;
        font-weight: 700;
        cursor: pointer;
        i {
          margin-left: 10px;
        }
      }
    }
  }
  .mainBox {
    padding: 10px;
    position: absolute;
    width: 83%;
    background-color: #fff;
    box-shadow: 0 10px 20px #666;
    top: 62px;
    z-index: 100;
    .tip {
      font-size: 24px;
      width: 100%;
      font-weight: 700;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .dropdownItem {
      width: 100%;
      min-height: 400px;
      font-size: 14px;
      display: flex;
      justify-content: center;
      .dropItem {
        display: flex;
        width: 100%;
        flex-wrap: wrap;
        justify-content: flex-start;
        padding: 20px 0;
        .itemList {
          width: 300px;
          height: 110px;
          margin-right: 40px;
          display: flex;
          align-items: center;
          flex-direction: column;
          margin-top: 30px;
          &:hover {
            .right {
              span {
                border-bottom: 2px solid #244d4d;
              }
            }
          }
          .left {
            height: 110px;
            width: 200px;
            img {
              height: 100%;
              width: 100%;
            }
          }
          .right {
            flex: 1;
            display: flex;
            margin-left: 5px;
            font-size: 16px;
            font-weight: 700;
            color: #244d4d;
            span {
              cursor: pointer;
            }
          }
        }
      }
    }
  }
}
.fade-enter-active,
.fade-leave-active {
  transform: translateX(-1600px);
  transition: 0.3s;
}
.product-list {
  background-color: #fff;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 30px;
}
.product-list p {
  padding: 10px 0;
  text-align: center;
  color: #779;
  font-size: 14px;
}
.productList-box {
  color: #244d4d;
  border: 1px solid #244d4d;
  padding: 10px;
  display: flex;
  flex-direction: column;
  word-wrap: wrap;
  width: 260px;
  height: 160px;
  align-items: center;
  margin: 0 10px;
  .imgBox {
    margin-bottom: 10px;
    img {
      height: 100px;
    }
  }
  h3 {
    padding-bottom: 5px;
    text-align: center;
    font-weight: bold;
    font-size: 16px;
  }
}
.productList-box:hover {
  background-color: #244d4d;
  color: #fff;
}
.goodsList {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  padding: 0 0 0 150px;
  flex-wrap: wrap;
  margin-bottom: 20px;
  .empty {
    display: flex;
    width: 100%;
    .el-empty {
      width: 100%;
    }
  }

  .goodslist-box {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    height: 440px;
    width: 300px;
    position: relative;
    background: #f2f2f2;
    overflow: hidden;
    margin: 10px 60px 20px 20px;
    &:hover {
      .icons {
        top: 0;
      }
    }
    .icons {
      position: absolute;
      top: -100%;
      left: 0;
      height: 440px;
      width: 300px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 0.5rem;
      background: rgba(242, 242, 242, 0.7);
      z-index: 40;
      a {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 50px;
        width: 50px;
        background-color: #fff;
        color: #244d4d;
        font-size: 20px;
        margin: 0 10px;
        &:hover {
          background-color: #244d4d;
          color: #fff;
        }
      }
    }
    .content {
      z-index: 20;
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      margin-left: 10px;
      .price {
        color: #779;
        font-size: 14px;
      }
      h3 {
        color: #244d4d;
        font-size: 18px;
      }
      .spanlist {
        margin: 5px 0;
        font-weight: 700;
        font-size: 12px;
      }
    }
    .image {
      height: 340px;
      width: 300px;
      display: flex;
      align-items: center;
      justify-content: center;
      img {
        height: 100%;
        width: 100%;
        &:hover {
          transform: scale(1.1);
        }
      }
    }
  }
}
</style>
